<template>
  <van-nav-bar :title="title"
               left-text="返回"
               left-arrow
               :fixed="true"
               :right-text="rightText"
               @click-right="onClickRight"
               @click-left="onClickBack">
  </van-nav-bar>
  <div class="topic">
    22xxx
    <van-notice-bar scrollable :text="topicMsg" style="margin-top: 15px;"/>
  </div>

  <span ref="boolRef">{{ bool }}</span>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import {nextTick, onMounted, ref, watch} from "vue";
import {userStore} from '@/store/userStore.ts'

const router = useRouter()
const store = userStore()
type Props = {
  title?: string,
  topicMsg?: string
  bool?: boolean
}
withDefaults(defineProps<Props>(), {
  title: () => "小区核酸检测",
  topicMsg: () => "米袋虽空——樱花开哉！",
})


const rightText = ref("登录")
const boolRef = ref(false);

const onClickRight = () => {
  router.push("/login")
}
const onClickBack = () => {
  router.back()
}

onMounted(() => {
  let loginFlag = store.getLoginFlag
  if (loginFlag || boolRef.value?.innerText == "true") {
    rightText.value = ""
  }

})

// watch 的第一个参数可以是不同形式的数据源，它可以是一个ref（包括计算属性），一个响应式对象，一个getter函数，或多个数据源组成的数组。
// 不能直接监听响应式对象的属性：
// 这里需要写成返回对象属性的getter的函数
watch(() => store.getLoginFlag, (loginFlag: any) => {
  if (!loginFlag) {
    rightText.value = "登录"
  }
});

watch(rightText, (val: any) => {
});

</script>

<style scoped>
.van-nav-bar {
  background: #535bf2;
}

.topic {
  background: goldenrod;
  height: 30px;
  width: 100%;
  position: absolute;
  top: 10px;
}

</style>